<template>
	<view>

		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000"
			backState="1000">
			<view class="title-box">
				<text>客户管理</text>
			</view>
		</z-nav-bar>

		<u-sticky :offsetTop="offsetTop">
			<view class="searchBox">
				<view style="display: flex;" @click="showStatus=!showStatus">
					<text class="city">{{currentStatus.statusStr}}</text>
					<u-icon :name="showStatus ? 'arrow-up' : 'arrow-down'" color="#fff" size="14"></u-icon>
				</view>

				<view class="search">
					<u--input v-model="keyword" clearable border="none" fontSize="12" placeholder="输入客户名称/企业名称/联系电话查询"
						@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399" />
				</view>
				<!-- 	<image @click="showFilter=!showFilter" src="/static/other/filter_ota.png"
					style="width: 40rpx;height: 40rpx;" mode="scaleToFill"></image> -->
			</view>
		</u-sticky>
	
		<mescroll-body id="mescroll" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="customerItem" v-for="(item,index) in list" :key="index" @click="btnClick(3,item)">
				<view class="text-line">
					<text class="text-name">客户类型:</text>
					<text class="text-value">{{item.memberType|customerType}}</text>
				</view>

				<block v-if="item.memberType == 1">
					<view class="text-line">
						<text class="text-name">企业名称:</text>
						<text class="text-value">{{item.enterpriseName|filterNull}}</text>
					</view>
					<view class="text-line">
						<text class="text-name">企业联系人:</text>
						<text class="text-value">{{item.memberName|filterNull}}</text>
					</view>
				</block>

				<block v-else>
					<view class="text-line">
						<text class="text-name">客户名称:</text>
						<text class="text-value">{{item.memberName|filterNull}}</text>
					</view>

				</block>

				<view class="text-line">
					<text class="text-name">联系电话:</text>
					<text class="text-value">{{item.contactPhone|filterNull}}</text>
				</view>
				<view class="text-line">
					<text class="text-name">客户来源:</text>
					<text class="text-value">{{item.memberSource|memberSource}}</text>
				</view>

				<u-line color="#efefef" margin="20rpx 0"></u-line>
				<view class="flex-row-end">
					<view class="btn-detail" @click.stop="btnClick(1,item)">
						编辑
					</view>
					<view class="btn-detail" @click.stop="btnClick(2,item)">
						删除
					</view>

				</view>

			</view>
		</mescroll-body>

		<view class="bottomView flex-row-center-sb">
			<!-- <view class="btn" style="border: 1rpx solid #1673ff;color: #1673ff;background-color: #fff;"
				@click="addCustomer">添加客户</view>
			<view class="btn" @click="goChannelStatistic">渠道转化统计</view> -->
			<view class="btn" @click="addCustomer">添加客户</view>
		</view>

		<view v-if="showStatus" class="filterPop" :style="[{top:popTop}]">
			<view class="filterContent">
				<text class="filterItem" :class="{active : currentStatus.code===item.code}"
					v-for="(item, index) in status" :key="index"
					@click.stop="changeStatus(item)">{{item.statusStr}}</text>
			</view>
		</view>

		<view v-if="showFilter" class="filterPop" :style="[{top:popTop}]">
			<view class="filterContent">
				<text class="filterItem" :class="{active : currentChannel.value===item.value}"
					v-for="(item, index) in channels" :key="index"
					@click.stop="changeChannel(item)">{{item.lable}}</text>
			</view>
		</view>


	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import * as customerApi from '@/api/cutomer-api.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				offsetTop: 0,
				isSearch: false,
				showStatus: false,
				showFilter: false,
				keyword: '',
				popTop: 0,
				currentStatus: {
					statusStr: '全部',
					code: 0
				},
				status: [{
						statusStr: '全部',
						code: 0
					},
					{
						statusStr: '个人客户',
						code: 2
					},
					{
						statusStr: '企业客户',
						code: 1
					}
				],
				currentChannel: {
					lable: '全部',
					value: 0
				},
				channels: [{
						lable: '全部',
						value: 0
					},
					{
						lable: '中升go',
						value: 1
					}
				],

				list: []

			};
		},
		onReady() {
			//监听筛选组件距离顶部的距离
			const query = uni.createSelectorQuery();
			query.select('#mescroll').boundingClientRect();
			query.exec((res) => {
				this.popTop = res[0].top + 'px'
			
			})
		},
		
		onLoad(option) {
			//获取手机状态栏高度
			this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750 * uni.getSystemInfoSync()
				.windowWidth) - 0.5;
			
		},
		methods: {
			upCallback(page) {

				var params = {
					memberName: this.keyword,
					memberType: this.currentStatus.code,
					memberStatus: 1,
					pageNum: page.num,
					pageSize: page.size,
				}
				customerApi.memberList(this.toParams(params)).then(res => {
					//设置列表数据
					if (page.num == 1) this.list = []; //如果是第一页需手动制空列表
					this.list = this.list.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//搜索
			searchChange(value) {
				this.mescroll.triggerDownScroll();
			},
			changeStatus(item) {
				this.currentStatus = item;
				this.showStatus = !this.showStatus;
				this.showFilter = false;
				this.mescroll.triggerDownScroll();
			},
			changeChannel(item) {
				this.currentChannel = item;
				this.showStatus = false;
				this.showFilter = !this.showFilter;
				this.mescroll.triggerDownScroll();
			},
			// 编辑|删除|详情
			btnClick(type, item) {
				switch (type) {
					case 1: //编辑
						uni.navigateTo({
							url: './add?type=1' + '&memberNo=' + item.memberNo
						})
						break;
					case 2: //删除
						this.deleteCustomer(item.memberNo);
						break;
					case 3: //详情
						uni.navigateTo({
							url: './detail?memberNo=' + item.memberNo
						})
						break;
					default:
						break;
				}
			},
			deleteCustomer(memberNo) {
				uni.showModal({
					title: '提示',
					content: '确认删除该客户吗?',
					cancelText: '取消',
					confirmText: '确认',
					success: (res) => {
						if (res.confirm) {
							customerApi.deleteMember(memberNo).then(res1 => {
								if (res1.code == 200) {
									this.mescroll.triggerDownScroll();
								}
							})
						}
					}
				})
			},
			// 新增客户
			addCustomer() {
				uni.navigateTo({
					url: './add?type=0'
				})
			},
			// 渠道转化统计
			goChannelStatistic() {
				uni.navigateTo({
					url: '/customer/channelStatistic'
				})
			}

		}
	};
</script>

<style lang="scss" scoped>
	.searchBox {
		padding: 20upx;
		display: flex;
		align-items: center;
		// background-color: #fff;
		background: linear-gradient(90deg, #3599FF 0%, #0275ED 100%);

		.city {
			font-size: 28rpx;
			color: #fff;
			margin-right: 8rpx;
		}

		.search {
			flex: 1;
			padding: 0 20upx;
			margin: 0 20upx;
			height: 60upx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24upx;
			background-color: #ffffff;
			border-radius: 30rpx;
		}
	}

	.customerItem {
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 20rpx;
		padding: 24rpx;
		color: #666;
		font-size: 28rpx;
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
	}

	.bottomView {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		padding: 0 44rpx;
		background-color: #FFFFFF;

		.btn {
			height: 88rpx;
			margin: 20rpx;
			width: 100%;
			line-height: 88rpx;
			text-align: center;
			border-radius: 44rpx;
			background-color: #1673FF;
			font-size: 32rpx;
			color: #fff;
		}
	}

	.filterPop {
		position: fixed;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		z-index: 999999999;

		.filterContent {
			background-color: #ffffff;
			padding: 28rpx 20rpx 10rpx;
			display: flex;
			flex-wrap: wrap;

			.filterItem {
				width: 200rpx;
				line-height: 60rpx;
				text-align: center;
				background: #EFEFEF;
				border-radius: 6rpx;
				color: #666666;
				font-size: 28rpx;
				margin: 0 30rpx 23rpx 0;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;

				&.active {
					background: #1673FF;
					color: #ffffff;
				}
			}
		}
	}
</style>